import styled from 'styled-components';

export const HomeWrapper = styled.div`
  width: 700px;
  margin: 35px auto;
  // background-color: #fff;
  // box-shadow: 0 0 10px 0 rgba(0,0,0,.1);
`;

//recommend css
export const RecommendFilter = styled.div`
  margin-top: 20px;
  border-bottom: 1px solid #f7f7f7;
  margin-bottom: 20px;
`;

export const RecommendUl = styled.ul`
  margin-bottom: -1px;
  overflow: hidden;
`;

export const RecommendLi = styled.li`
  float: left;
  margin-right: 20px;
  font-size: 18px;
  height: 48px;
  line-height: 48px;
  .active {
    display: block;
    font-weight: 700;
    color: #151515;
    border-bottom: 2px solid #151515;
  }
`;

export const ListWrapper = styled.div`
  .link {
    color: #151515; 
  } 
`;

export const ListInner= styled.div`
  position: relative;
  border-bottom: 1px solid #f7f7f7;
  &:hover {
   background: #fafafa; 
  }
`;

export const ListItem = styled.div`
  min-height: 80px;
  display: flex;
  align-item: center;
  padding: 20px;
  margin: 0 -20px;
  border-radius: 4px;
`;
export const Content = styled.div`
    margin-right: 140px;
    flex: 1;
`;

export const ContentTitle = styled.div`
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
`;

export const ContentInfo = styled.div`
    height: 24px;
    line-height: 24px;
    color: #999;
    font-size: 0;
    padding-top: 5px;
`;

export const ContentSpan = styled.div`
  display: inline-block;
  font-size: 13px;
  margin-right: 8px;
  &.source {
    color: #151515;
  }
`;

export const ContentPic = styled.div`
  position: absolute;
    top: 20px;
    right: 0;
    width: 120px;
    height: 80px;
    text-align: center;
  img {
    width: 120px;
    height: 80px;
    line-height: 80px;
    border-radius: 4px;
  }
`;

